<template>
	<view class="content">
		<view style="background-color: #fff;padding-bottom: 40rpx;">
			<u-navbar
				leftIconSize="0" 
				:placeholder="true" 
				:fixed="false" 
				:safeAreaInsetTop="true" 
				:autoBack="true"
				:border-bottom="false"></u-navbar>
				
			<view class="user-item"  v-if="user">
				<view
					style="display: flex;align-items: center;justify-content: center;flex-direction: column;position: relative;">
					<u-avatar :src="user.avatar"size="160"></u-avatar>
					
				</view>
				<view style="display: flex;flex-direction: column;flex: 1;justify-content: space-between;margin-left: 40rpx;">
					<view style="display: flex;flex-direction: row;align-items: center;margin-bottom: 20rpx;">
						<text style="font-size: 48rpx;color: #333;font-weight: bold;">{{user.nick_name}}</text>
						<u-image v-if="user.level == 1" width="80rpx" height="80rpx" src="https://img.koalalf.com/wuyoushenghuo/level-icon/LV1.png" mode="widthFix"></u-image>
						<u-image v-if="user.level == 2" width="80rpx" height="80rpx" src="https://img.koalalf.com/wuyoushenghuo/level-icon/LV2.png" mode="widthFix"></u-image>
						<u-image v-if="user.level == 3" width="80rpx" height="80rpx" src="https://img.koalalf.com/wuyoushenghuo/level-icon/LV3.png" mode="widthFix"></u-image>
						<u-image v-if="user.level == 4" width="80rpx" height="80rpx" src="https://img.koalalf.com/wuyoushenghuo/level-icon/LV4.png" mode="widthFix"></u-image>
						<u-image v-if="user.level == 5" width="80rpx" height="80rpx" src="https://img.koalalf.com/wuyoushenghuo/level-icon/LV5.png" mode="widthFix"></u-image>
						<u-image v-if="user.level == 6" width="80rpx" height="80rpx" src="https://img.koalalf.com/wuyoushenghuo/level-icon/LV6.png" mode="widthFix"></u-image>
					</view>
					
					<view class="my-view-data">
						<view class="my-view-data-item" @click="openPage('pages/product/collectionList', {})">
							<text class="my-view-data-item-left">收藏</text>
							<text class="my-view-data-item-right">{{user.collection_count}}</text>
						</view>
						<view class="my-view-data-item" @click="openPage('pages/product/footMarkList', {})">
							<text class="my-view-data-item-left">足迹</text>
							<text class="my-view-data-item-right">{{user.footmark_count}}</text>
						</view>
						<view class="my-view-data-item" @click="openPage('pages/coupons/myCouponList', {})">
							<text class="my-view-data-item-left">优惠券</text>
							<text class="my-view-data-item-right">{{user.coupon_count}}</text>
						</view>
					</view>
				</view>
				<view style="margin-right: -40rpx;height: 60rpx;">
					<u-image @click="openPage('pages/setting/setting', {user: JSON.stringify(user)})"
						style=" " width="96rpx" :src="images.shezhi" mode="widthFix"></u-image>
				</view>
				
			</view>
		</view>

		<!-- <view class="vip-content" @click="openPage('pages/center/vip', {})">
			<view class="vip-content-item">
				<text class="vip-content-item-title">PLUS会员</text>
				<text class="vip-content-item-remark">仅需298元/年 可享受专属会员权益</text>
			</view>
			<u-image width="160rpx" height="60rpx" src="https://img.koalalf.com/center/lijiqianggou.png"
				mode="widthFix"></u-image>
		</view> -->
		
		<!-- 我的钱包 -->
		<!-- <view class="wallet">
			<view class="walletT">
				<view class="l">
						我的收益
				</view>
				<view class="r" v-if="user.cash!=0.00">
					<navigator url="income"><view style="display: flex;flex-direction: row;">查看详情 <u-icon color="#d5d5d5" size='24' name="arrow-right"></u-icon></view></navigator>
				</view>
			</view>
			<u-line color="#f5f5f5" length="100%"></u-line>
			<view class="walletD">
				<view class="items">
					<view class="num">
						{{user.cash?user.cash:'0.00'}}
					</view>
					<view class="text">
						账户余额
					</view>
				</view>
				<view class="items">
					<view class="num">
						{{user.income?user.income:'0.00'}}
					</view>
					<view class="text">
						累计收益
					</view>
				</view>
				<view class="items">
					<view class="num">
						{{user.integral?user.integral:0}}
					</view>
					<view class="text">
						今日收益
					</view>
				</view>
			</view>
		</view> -->
		
		<view style="background-color: #fff;border-radius: 20rpx;margin: 20rpx;padding: 48rpx;">
			<view @click="openPage('/pages/orders/orders', {current: 0})"
				style="font-size: 30rpx;color: #4B4B4B;font-weight: bold;margin-bottom: 20rpx;display: flex;align-items: center;justify-content: space-between;">
				<text>我的订单</text>
				<view
					style="display: flex;flex-direction: row;align-items: center;color: #d5d5d5;font-size: 24rpx;font-weight: 400;">
					<text style="margin-right: 4rpx;">全部</text>
					<u-icon size="24" color="#d5d5d5" name="arrow-right"></u-icon>
				</view>
			</view>
			<!-- <u-cell title="我的订单" :isLink="true" value="全部" arrow-direction="right"></u-cell> -->
			<u-line color="#f5f5f5" length="100%"></u-line>
			<view class="my-order-content">
				<view v-for="(item, index) in orderIcon" :key="index" class="my-order-item"
					@click="openPage(item.redirect.url, item.redirect.params)">
					<u-image width="80rpx" height="80rpx" :src="item.icon" mode="widthFix"></u-image>
					<text class="my-order-item-title" style="margin-top: 10rpx;">{{item.title}}</text>
				</view>
			</view>
			<!-- <view class="my-order-wuliu">
				<u-image mode="widthFix" width="110rpx" src="https://img14.360buyimg.com/pop/jfs/t1/168011/9/11028/492684/6047155aEa4afa220/3ff83e22902255a5.png"></u-image>
				<view class="my-order-wuliu-status">
					<text class="my-order-wuliu-status-text">商品已下单</text>
					<text class="my-order-wuliu-status-remark">商品已打包，待快递取货...</text>
				</view>
			</view> -->
		</view>


		<view v-for="(item,index) in navList" :key="index"
			style="background-color: #fff;border-radius: 20rpx;margin: 20rpx;padding: 48rpx;margin-top: 20rpx;">
			<view style="font-size: 30rpx;color: #4B4B4B;font-weight: bold;margin-bottom: 20rpx;">{{item.title}}</view>
			<u-line color="#f5f5f5" length="100%"></u-line>
			<view class="my-order-content">
				<view v-for="(citem, cindex) in item.child" :key="cindex">
					<view @click="openPage(citem.page, citem.params)" class="my-order-item" :plain="true"
						style="border: none;padding: 0;">
						<u-image width="80rpx" height="80rpx" :src="citem.icon" mode="widthFix"></u-image>
						<text class="my-order-item-title" style="margin-top: 10rpx;">{{citem.title}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import imagesUrl from '../../common/images.js'
	import {userInfoByToken, centerConfig} from '../../common/http.api.js'
	export default {
		data() {
			return {
				user: {
					income:0.00,
				},
				list: [{
						icon: '1_tuandui-06',
						title: '我的团队',
						page: 'pages/center/team'
					},
					{
						icon: 'caiwu',
						title: '财务明细',
						page: 'pages/center/finance'
					},
				],
				mall: [{
					icon: 'shangchengdingdan',
					title: '商城订单',
					page: 'pages/orders/orders'
				}, {
					icon: 'shouhuodizhi',
					title: '收货地址',
					page: 'pages/address/address'
				}],
				background: {
					// background: "url('/static/my/bg@2x.png') no-repeat",
					backgroundSize: "100%",
					width: '100vw'
				},
				images: {},

				navList: [],
				
				orderIcon: [{
						title: '待付款',
						icon: 'https://img.koalalf.com/gewuyunshang/daifukuan.png',
						redirect: {
							url: '/pages/orders/orders',
							params: {
								current: 1
							}
						}
					},
					{
						title: '待收货',
						icon: 'https://img.koalalf.com/gewuyunshang/daishouhuo.png',
						redirect: {
							url: '/pages/orders/orders',
							params: {
								current: 2
							}
						}
					},
					{
						title: '已完成',
						icon: 'https://img.koalalf.com/gewuyunshang/yiwancheng.png',
						redirect: {
							url: '/pages/orders/orders',
							params: {
								current: 3
							}
						}
					},
					// {
					// 	title:'售后',
					// 	icon:'https://img.koalalf.com/center/order5.png',
					// 	redirect:{
					// 		url: '/pages/orders/orders',
					// 		params: {current: 4}
					// 	}
					// }
				],
			}
		},
		onLoad() {
			this.images = imagesUrl.my
			let that = this;
			userInfoByToken({}).then(res => {
				that.user = res
				uni.setStorageSync('user_info', JSON.stringify(res))
			})
			
			// #ifdef APP-PLUS
			plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
				if(widgetInfo.version){
					that.version = widgetInfo.version
				}else{
					that.version = plus.runtime.version
				}
				centerConfig({version: that.version, system: uni.getSystemInfoSync().platform}).then(res => {
					that.navList = res
				})
			})
			// #endif
			
			// #ifdef MP-WEIXIN
			centerConfig({version: '1.0.0', system: uni.getSystemInfoSync().platform}).then(res => {
				that.navList = res
			})
			// #endif
			
			uni.$on('updateUserInfo', function(data) {
				userInfoByToken({}).then(res => {
					that.user = res
					uni.setStorageSync('user_info', JSON.stringify(res))
				})
				
				centerConfig({version: '1.0.0', system: uni.getSystemInfoSync().platform}).then(res => {
					that.navList = res;
				})
			})
			
			

			
		},
		methods: {
			openPage(path, params = {}) {
				this.$u.route({
					url: path,
					params
				})
			},
			copy(text) {
				let that = this;
				uni.setClipboardData({
					data: text,
					success: function() {
						console.log(1111)
					}
				});
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			let userInfo = JSON.parse(uni.getStorageSync('user_info'))
			return {
				title: "餐前福利！外卖红包天天领，最高可得66元",
				path: '/pages/meituan/meituan?share_key=' + this.user.share_key,
				imageUrl: '../../static/share.png'
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.wallet{
		    background-color: #fff;
		    border-radius: 10px;
		    margin: 10px;
		    padding: 24px;
	}

	.wallet .walletT{
		display: flex;
		align-items: center;
		justify-content: space-between;
		    font-size: 15px;
		    color: #4B4B4B;
		    font-weight: bold;
		    margin-bottom: 10px;
	}
	.wallet .walletT .r{
		    display: flex;
		    flex-direction: row;
		    align-items: center;
		    color: #d5d5d5;
		    font-size: 12px;
		    font-weight: 400;
	}
	.wallet .walletD{
		display: flex;
		justify-content: space-between;
		text-align: center;
	}
	.wallet .walletD  .items{padding-top: 20rpx;}
	.wallet .walletD .text{
		font-size: 24rpx;
	}
	.wallet .walletD  .num{
		font-size: 35rpx;
		font-weight: bold;
		margin-bottom: 5rpx;
		color: #000;
	}

	.content {
		padding-bottom: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.user-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 40rpx;
		position: relative;
		// border-radius: 10rpx;
	}

	.my-order-content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.my-order-item {
			margin-top: 40rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.my-order-item-title {
				font-size: 24rpx;
			}
		}
	}

	.vip-content {
		width: 715rpx;
		height: 120rpx;
		background-size: 100%;
		margin: 0 auto;
		background-image: url('https://img.koalalf.com/center/lijiqianggou-bg.png');
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;

		.vip-content-item {
			display: flex;
			flex-direction: column;

			.vip-content-item-title {
				font-size: 28rpx;
				color: #fff;
				font-weight: 600;
				margin-bottom: 8rpx;
			}

			.vip-content-item-remark {
				font-size: 20rpx;
				color: #fff;
			}
		}
	}

	.my-order-wuliu {
		background-color: #f5f5f5;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-top: 40rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		.my-order-wuliu-status {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 20rpx;

			.my-order-wuliu-status-text {
				color: #1053EA;
				font-size: 26rpx;
				margin-bottom: 20rpx;
			}

			.my-order-wuliu-status-remark {
				color: #4B4B4B;
				font-size: 22rpx;
			}
		}
	}

	.shengji-icon {
		color: #FC472F;
		background-color: #FDEBEB;
		border-radius: 25rpx;
		width: 160rpx;
		height: 50rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.my-view-data {
		display: flex;
		flex-direction: row;

		// padding:0 40rpx;
		.my-view-data-item {
			font-size: 24rpx;
			font-weight: 600;
			margin-right: 40rpx;

			.my-view-data-item-left {
				margin-right: 10rpx;
			}

			.my-view-data-item-right {
				font-size: 30rpx;
			}
		}
	}
</style>
